<template>
  <el-popover
    :disabled="disabled"
    @after-enter="inputGetFocus"
  >
    <template #reference>
      <el-input
        v-bind="$attrs"
        :placeholder="placeholder"
        :value="showValue"
        :disabled="disabled"
        :clearable="clearable"
        @clear="inputClear"
        type="text"
      ></el-input>
    </template>
    <div class="inputRange">
      <el-input
        ref="inputRef"
        v-if="type!=='number'"
        v-bind="propsMin"
        v-on="eventsMin"
        :type="type"
        :placeholder="minPlaceholder"
        v-model="syncValue.min"
        :disabled="disabled"
        :clearable="clearable"
      ></el-input>
      <el-input-number
        ref="inputRef"
        v-else
        v-bind="propsMin"
        v-on="eventsMin"
        :max="syncValue.max"
        :placeholder="minPlaceholder"
        v-model="syncValue.min"
        :disabled="disabled"
        controls-position="right"
      ></el-input-number>

      <el-input
        class="maxInput"
        v-if="type!=='number'"
        v-bind="propsMax"
        v-on="eventsMax"
        :type="type"
        :placeholder="maxPlaceholder"
        v-model="syncValue.max"
        :disabled="disabled"
        :clearable="clearable"
      ></el-input>
      <el-input-number
        class="maxInput"
        v-else
        v-bind="propsMax"
        v-on="eventsMax"
        :min="syncValue.min"
        :placeholder="maxPlaceholder"
        v-model="syncValue.max"
        :disabled="disabled"
        controls-position="right"
      ></el-input-number>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'InputRange',
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          max: undefined,
          min: undefined
        }
      }
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    type: String,
    disabled: Boolean,
    clearable: Boolean,
    propsMin: {
      type: Object,
      default: () => {
        return {
          placeholder: '请输入最小值'
        }
      }
    },
    propsMax: {
      type: Object,
      default: () => {
        return {
          placeholder: '请输入最大值'
        }
      }
    },
    eventsMin: Object,
    eventsMax: Object
  },
  model: {
    event: 'update:input',
    prop: 'value'
  },
  data() {
    return {
      syncValue: {
        min: undefined,
        max: undefined
      }
    }
  },
  computed: {
    minPlaceholder() {
      return this.propsMin?.placeholder || '请输入最小值'
    },
    maxPlaceholder() {
      return this.propsMax?.placeholder || '请输入最大值'
    },
    showValue() {
      const show = this.isEmpty(this.syncValue?.min) + ' 至 ' + this.isEmpty(this.syncValue?.max)
      if (show === ' 至 ') {
        return ''
      }
      return show
    }
  },
  watch: {
    syncValue: {
      handler(val) {
        if (this.type === 'number') {
          if (this.syncValue?.min > this.syncValue?.max) {
            this.syncValue.min = this.syncValue.max
          }
        }
        this.$emit('update:input', val)
      },
      deep: true
    },
    value: {
      handler(val) {
        this.$set(this.syncValue, 'min', val?.min)
        this.$set(this.syncValue, 'max', val?.max)
      },
      deep: true
    }
  },
  methods: {
    inputGetFocus() {
      this.$refs.inputRef.focus()
    },
    isEmpty(val) {
      if(this.type === 'number'){
        if(val === undefined || val === null) {
          return ''
        }
      }
      return val
    },
    inputClear() {
      this.syncValue = {
        min: undefined,
        max: undefined
      }
    }
  }
}
</script>

<style scoped lang="scss">
.inputRange {
  ::v-deep {
    .el-input__validateIcon {
      display: none;
    }

    .el-input-number {
      width: 100%;
    }
  }

  .maxInput {
    margin-top: 10px;
  }
}
</style>
